<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../caselist/caselist.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
  <script src="../jquery/jquery.min.js"></script>
</head>

<body>
  <div class="box">
    <div class="index__header">
      <div class="index__header__logo">
        <img src="/image/loge.png" alt="" srcset="">
      </div>
      <div class="index__header__phone">
        <div class="index__header__phone__img">
          <img src="/image/phone.png" alt="" srcset="">
        </div>
        <div class="index__header__phone__text">
          咨询我们：12345678900
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div class="nav1">
        <div class="nav__item"><a href="../index/index.html">首页</a></div>
        <div class="nav__item"><a href="../wzkf/wf.html">网站开发</a></div>
        <div class="nav__item"><a href="../rj/app.html">APP开发</a></div>
        <div class="nav__item"><a href="../xcx/xc.html">小程序开发</a></div>
        <div class="nav__item"><a href="../case/case.html">案例</a></div>
        <div class="nav__item"><a href="../about/about.html">关于我们</a></div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
      </div>
    </div>
    <!-- 详情内容 -->
    <div class="box1">
      <div class="box1-1">首页>案例>手机/APP 开发>详情</div>
      <div class="box1-2">
        <div class="box1-21">中国风背景设计图</div>
        <div class="box1-22">
          <img src="../image/xqbj.png" alt="">
        </div>
        <div class="box1-23">
          <div>
            就是大家未来的生活习惯而不是单单一种生活方式。
            你可以畅想一下，你从梦乡醒来，第一件事还是拿起手机，
            通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，
            楼下已经有一辆出租车在等你-它是你通过”天购”预约的，同样，
            它也是免费的。临近下班，”天购提示”提醒你今天是老婆的生日，
            于是你还是拿起手机通过”天购”预定了今晚的王品台塑牛排、百老汇影城的电影、
            喜来登酒店的温馨套房.….这些还都是免费的!
          </div>
          <div>
            就是大家未来的生活习惯而不是单单一种生活方式。你可以畅想一下，你从梦乡醒来，第一件事还是拿起手机，
            通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，楼下已经有一辆出
            租车在等你-它是你通过”天购”预约的，同样，它也是免费的。临近下班，”天购提
            示”提醒你今天是老婆的生日，于是你还是拿起手机通过”天购”预定了今晚的王品台
            塑牛排、百老汇影城的电影、喜来登酒店的温馨套房.….这些还都是免费的!
          </div>
          <div>
            就是大家未来的生活习惯而不是单单一种生活方式。你可以畅想一下，你从梦乡醒来，
            第一件事还是拿起手机，通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，
            楼下已经有一辆出租车在等你-它是你通过”天购”预约的，同样，它也是免费的。
            临近下班，”天购提示”提醒你今天是老婆的生日，于是你还是拿起手机通过”天购”
            预定了今晚的王品台塑牛排。
          </div>
        </div>
      </div>
      <div class="box1-3">
        <div class="box1-31">热门相似作品：</div>
        <div class="box1-32">
          <div class="box1-32-1">
            <div class="box1-321">
              <img src="../image/ls1.png" alt="">
            </div>
            <div class="box1-322">
              <text>UI新媒体</text>
              移动端移动端移动埫
            </div>
          </div>
          <div class="box1-32-1">
            <div class="box1-321">
              <img src="../image/ls2.png" alt="">
            </div>
            <div class="box1-322">
              <text>UI新媒体</text>
              移动端移动端移动埫
            </div>
          </div>
          <div class="box1-32-1">
            <div class="box1-321">
              <img src="../image/ls3.png" alt="">
            </div>
            <div class="box1-322">
              <text>UI新媒体</text>
              移动端移动端移动埫
            </div>
          </div>
          <div class="box1-32-1">
            <div class="box1-321">
              <img src="../image/ls4.png" alt="">
            </div>
            <div class="box1-322">
              <text>UI新媒体</text>
              移动端移动端移动埫
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-content">
        <div class="foot-top">
          <div class="foot-left">
            <div class="left1">山东柏瑞设计有限公司</div>
            <div class="left1">联系电话：12345678900</div>
            <div class="left1">地址：济南创新谷2号楼孵化器五楼（长清区海棠路与芙蓉路交叉路口东南）</div>
          </div>
          <div class="foot-right">
            <div class="foot-img">
              <img src="../image/二维码.png" alt="">
            </div>
            <div class="foot-font">微信公众号</div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        Shandong Bairui Software Technology Co, Ltd. 山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
      </div>
    </div>
  </div>
  <script>
     var mySwiper = new Swiper('.swiper', {

autoplay: {
  delay: 2000,
},
loop: true, // 循环模式选项

// 如果需要分页器
pagination: {
  el: '.swiper-pagination',
},

// 如果需要前进后退按钮
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},

// 如果需要滚动条
scrollbar: {
  el: '.swiper-scrollbar',
},
})
  </script>
</body>

</html>